<template>
    <view class="withdrawals-history-container u-p-20">
        <u-collapse hover-class="none">
            <u-collapse-item v-for="(item, index) in withdrawalsList" :key="index">
                <text slot="title">提现时间：{{ item.apply_time | date('yyyy-mm-dd hh:MM') }}</text>
                <view class="u-flex">
                    <view class="colla-content u-flex-1">
                        <view class="u-m-b-20">提现状态：{{ item.status | withdrawalStatus }}</view>
                        <view>提现金额：
                            <text class="color-red">{{ item.apply_money | unitPrice('￥') }}</text>
                        </view>
                    </view>
                    <view class="color-red" @click="lookDetails(item)">
                        查看详情
                    </view>
                </view>
            </u-collapse-item>
        </u-collapse>
        <view v-if="loading" class="no-data">努力加载中...</view>
        <view v-else-if="noData" class="no-data">没有更多了...</view>
        <u-popup v-model="isShowDetail" mode="bottom" closeable length="70%">
            <view class="u-m-30 u-text-center" style="font-weight: 600;">
                提现详情
            </view>
            <view class="pop-details u-m-l-20 u-m-r-20">
                <view class="u-m-20">提现金额：
                    <text class="color-red">￥{{ currentRow.apply_money | unitPrice }}</text>
                </view>
                <view class="u-m-20">当前状态：
                    <text>{{ currentRow.status | withdrawalStatus }}</text>
                </view>
                <view class="u-m-20">备注信息：
                    <text class="remark">{{ currentRow.apply_remark || '' }}</text>
                </view>
                <view class="u-m-20">提现日志：
                    <text class="remark">{{ currentRow.transfer_remark || '' }}</text>
                </view>
                <view class="u-m-20">审核备注：
                    <text class="remark">{{ currentRow.inspect_remark || '' }}</text>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import * as API_Distribution from '@/api/distribution.js'

export default {
    data() {
        return {
            params: {
                page_no: 1,
                page_size: 25
            },
            /** 提现记录列表 */
            withdrawalsList: [],
            /** 是否显示详情 */
            isShowDetail: false,
            /** 当前行的对象 */
            currentRow: {},
            loading: false,
            noData: false
        };
    },
    filters: {
        withdrawalStatus(val) {
            switch (val) {
                case 'APPLY': return '申请中'
                case 'TRANSFER_ACCOUNTS': return '已转账'
                case 'VIA_AUDITING': return '审核通过'
                case 'FAIL_AUDITING': return '审核失败'
            }
        }
    },
    onLoad() {
        this.getWithdrawalsList()
    },
    methods: {
        async getWithdrawalsList() {
            try {
                this.loading = true
                const { page_no, page_size } = this.params
                const res = await API_Distribution.getWithdrawalsList(this.params)
                const { data } = res
                if (page_no === 1) {
                    this.withdrawalsList = data
                } else {
                    this.withdrawalsList.push(...data)
                }
                this.noData = !data || data.length < page_size
            } finally {
                this.loading = false
                uni.stopPullDownRefresh()
            }
        },
        /** 查看详情 */
        lookDetails(item) {
            this.isShowDetail = true
            this.currentRow = item
        }
    },
    onPullDownRefresh() {
        this.params.page_no = 1
        this.getWithdrawalsList()
    },
    onReachBottom() {
        if (this.noData || this.loading) return
        this.params.page_no += 1
        this.getWithdrawalsList()
    }
}
</script>

<style lang="scss">
.color-red {
    color: $u-type-error;
}

.pop-details .remark {
    word-break: break-all;
}

.withdrawals-history-container {
    overflow: hidden;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

/deep/ {
    .u-empty {
        margin-top: -300rpx !important;
    }

    .u-collapse-body {
        height: 120rpx;
    }
}
.no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    color: #999999;
}
</style>
